<template>
    <div class="content">
        <div class="slideLeft">
            <div :style="{transform:leftLength}" class="item" @touchstart="ts($event)" @touchmove="tm($event)"
                @touchend="te($event)">
                <slot></slot>
            </div>
            <div class="menuDiv" ref="menuDiv">
                <div class="btnDiv" @click="del($event)">删除</div>
            </div>
        </div>

    </div>

</template>

<script>
    export default {
        name: "slideLeft",
        data() {
            return {
                startX: null,
                leftLength: "translateX(0)"
            }
        },
        methods: {
            ts(event) {
                if (event.changedTouches.length == 1) {
                    this.startX = event.changedTouches[0].clientX
                }
            },
            tm(event) {
                if (event.changedTouches.length == 1) {
                    var length = this.startX - event.changedTouches[0].clientX
                    if (length > 0) {
                        if (length > this.$refs.menuDiv.clientWidth) {
                            length = this.$refs.menuDiv.clientWidth
                        }
                        this.leftLength = `translateX(${length*(-1)}px)`
                    } else {
                        this.leftLength = "translateX(0px)"
                    }
                }
            },
            te(event) {
                if (event.changedTouches.length == 1) {
                    var length = this.startX - event.changedTouches[0].clientX
                    if (length < this.$refs.menuDiv.clientWidth / 2) {
                        this.leftLength = "translateX(0)"
                    } else {
                        this.leftLength = `translateX(${this.$refs.menuDiv.clientWidth*(-1)}px)`
                    }
                }
            },
            del(event) {
                this.$emit("delete",event)
            }
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/css/comm.scss";

    .slideLeft {
        position: relative;
        border-bottom: 1px solid #cccccc;

        .item {
            @include flexbox();
            background-color: #ffffff;
            position: relative;
            z-index: 1;
            transition: all 0.2s linear;

            .left {
                width: 1.2rem;
                height: 1.2rem;
                box-sizing: border-box;
                padding: .1rem;

                >img {
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }

            .right {
                flex: 1;
                @include flexbox(column);
                justify-content: space-around;
                margin-left: .2rem;

                .nm {
                    font-size: .28rem;
                }

                .time {
                    font-size: .24rem;
                    color: #999999;
                }
            }
        }

        .menuDiv {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;

            .btnDiv {
                background-color: #ff0000;
                color: #ffffff;
                width: 1.4rem;
                height: 100%;
                @include flexbox();
                justify-content: center;
                align-items: center;
            }
        }
    }
</style>